const qilian_user = {
    props: [],
    template: `
<div class="wrap">
    <div 
    class="user"
    v-show="whichShow==0">
        <div 
        class="user-item self">
            <div class="user-item-left">
                <span class="title-style">{{userinfo.name}}</span>
                <span>|</span>
                <span>邮箱：{{userinfo.email}}</span>
                <span>|</span>
                <span>权限：{{userinfo.power==1?'超级管理员':'普通管理员'}}</span>
            </div>
            <div class="user-oper">
                <button 
                class="button-warning button-hover"
                @click="openPannel(1)">修改</button>
            </div>
        </div>
        <div 
        class="user-item" 
        v-for="(user, index) in users" 
        :key="user.id"
        v-show="user.id!=userinfo.id">
            <div class="user-item-left">
                <span class="title-style">{{user.name}}</span>
                <span>|</span>
                <span>邮箱：{{user.email}}</span>
                <span>|</span>
                <span>权限：{{user.power==1?'超级管理员':'普通管理员'}}</span>
            </div>
            <div class="user-oper">
                <button 
                class="button-error button-hover"
                @click="deleteUser(index)"
                v-show="!isOne && user.id!=userinfo.id">删除</button>
            </div>
        </div>
    </div>

    <div 
    class="pannel" 
    v-show="whichShow==1">
        <div class="pannel-each" v-show="whichPannel==0">
            <qilian-tip type="red" right="2rem" bottom="2rem">{{addMsg}}</qilian-tip>
            <div class="pannel-close">
                <div class="add-form-title">添加用户</div>
                <button 
                class="pannel-close-item button-hover button-primary"
                @click="closePannel">取消添加</button>
            </div>
            <div class="add-form">
                <form class="add-form-main" @submit.prevent="addUser">
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="name" 
                        placeholder="请输入用户名" 
                        autocomplete="off"
                        required="required">
                    </div>
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="email" 
                        placeholder="请输入邮箱" 
                        autocomplete="off"
                        required="require">
                    </div>
                    <div class="add-form-item">
                        <select  v-model="power">
                          <option value ="0">普通管理员</option>
                          <option value ="1">超级管理员</option>
                        </select>
                    </div>
                    <div class="add-form-item">
                        <label for="isP">默认密码</label>
                        <input id="isP" type="radio" v-model="isOrigin" value="1">
                        <label for="notP">自定义密码</label>
                        <input id="notP" type="radio" v-model="isOrigin" value="0">
                    </div>
                    <div class="add-form-item" v-show="isOrigin=='0'">
                        <input type="password" v-model.trim="password" placeholder="请输入密码" autocomplete="off">
                    </div>
                    <div class="add-form-item" v-show="isOrigin=='0'">
                        <input 
                        type="password" 
                        v-model.trim="cPassword"
                        placeholder="再次输入密码" 
                        autocomplete="off">
                    </div>
                    <div class="add-form-item">
                        <button 
                        class="button-primary button-hover"
                        type="submit"
                        >提交</button>
                    </div>                
                </form>
            </div>
        </div>

        <div class="pannel-each" v-show="whichPannel==1">
            <qilian-tip type="red" right="2rem" bottom="2rem">{{updateMsg}}</qilian-tip>
            <div class="pannel-close">
                <div class="add-form-title">修改</div>
                <button 
                class="pannel-close-item button-hover button-primary"
                @click="closePannel">取消修改</button>
            </div>
            <div class="add-form">
                <form class="add-form-main" @submit.prevent="updateUser">
                    <div class="add-form-item">
                        <input 
                        type="text" 
                        v-model.trim="upemail" 
                        placeholder="请输入邮箱" 
                        autocomplete="off">
                    </div>
                    <div class="add-form-item">
                        <label for="isUP">原密码</label>
                        <input id="isUP" type="radio" v-model="isUpOrigin" value="1">
                        <label for="notUP">更改密码</label>
                        <input id="notUP" type="radio" v-model="isUpOrigin" value="0">
                    </div>
                    <div class="add-form-item" v-show="isUpOrigin=='0'">
                        <input type="password" v-model.trim="uppassword" placeholder="请输入密码" autocomplete="off">
                    </div>
                    <div class="add-form-item" v-show="isUpOrigin=='0'">
                        <input 
                        type="password" 
                        v-model.trim="cupPassword"
                        placeholder="再次输入密码" 
                        autocomplete="off">
                    </div>
                    <div class="add-form-item">
                        <button 
                        class="button-primary button-hover"
                        type="submit"
                        >提交</button>
                    </div>                
                </form>
            </div>
        </div>
    </div>

    <button 
    class="user-add button-primary"
    @click="openPannel(0)"
    v-show="whichShow==0 && !isOne">添加用户</button>
</div>
    `,
    data: function() {
        return {
            userinfo: {},
            users: [],
            whichShow: 0,
            whichPannel: 0,
            name: '',
            email: '',
            power: 0,
            isOrigin: 0,
            password: '',
            cPassword: '',
            addMsg: '请输入用户信息',
            updateMsg: '请输入用户信息',
            isOne: false,
            upemail: '',
            uppassword: '',
            cupPassword: '',
            isUpOrigin: 1
        }
    },
    created: function() {
        this.userinfo = JSON.parse(localStorage.getItem('userinfo'));
        this.upemail = this.userinfo['email'];
        if (this.userinfo.power == 0) {
            this.$options.methods.oneUser(this);
        } else {
            this.$options.methods.getUser(this);
        }
    },
    methods: {
        oneUser: function(that) {
            that.users.push(that.userinfo);
            that.isOne = true;
        },
        getUser: function(that) {
            that.isOne = false;
            axios.get(that.$host + 'getUser.php')
                .then(function(response) {
                    if (parseInt(response.data.code) == 0) {
                        that.users = response.data.data;
                    }
                }).catch(function(err) {
                    console.log(err);
                });
        },
        openPannel: function(id) {
            this.whichShow = 1;
            this.whichPannel = id;
        },
        closePannel: function() {
            this.whichShow = 0;
        },
        addUser: function() {
            if (parseInt(this.isOrigin) != 1) {
                if (!this.password || !this.cPassword) {
                    this.addMsg = '请输入密码';
                    return;
                }
                if (this.password != this.cPassword) {
                    this.addMsg = '两次密码不一致';
                    return;
                }
            }
            axios({
                method: 'post',
                url: this.$host + 'addUser.php',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify({
                    name: this.name,
                    email: this.email,
                    password: this.password,
                    power: this.power
                })
            }).then(response => {
                if (response.data.code == 0) {
                    const userinfo = {
                        id: response.data.data.id,
                        name: response.data.data.name,
                        email: response.data.data.email,
                        power: response.data.data.power
                    };
                    this.users.unshift(userinfo);
                    this.addMsg = `用户${userinfo.name}添加成功`;
                    this.$options.methods.closePannel.apply(this);
                } else {
                    this.addMsg = response.data.msg;
                }
            }).catch(err => {
                console.log(err);
            });
        },
        deleteUser: function(index) {
            if (confirm(`是否要删除用户[${this.users[index].name}]？`)) {
                if (prompt("输入DELETE再次确认删除", "") == "DELETE") {
                    axios({
                        method: 'post',
                        url: this.$host + 'delUser.php',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data: Qs.stringify({
                            id: this.users[index].id
                        })
                    }).then(response => {
                        if (response.data.code == 0) {
                            this.users.splice(index, 1);
                            location.reload();
                        } else {
                            alert(`${this.users[index].name}删除失败：${response.data.msg}`);
                        }
                    }).catch(err => {
                        console.log(err);
                    });
                }else {
                    alert("未正确输入，未删除");
                }
            }
        },
        updateUser: function() {
            if (parseInt(this.isUpOrigin) != 1) {
                if (!this.uppassword || !this.cupPassword) {
                    this.updateMsg = '请输入密码';
                    return;
                }
                if (this.uppassword != this.cupPassword) {
                    this.updateMsg = '两次密码不一致';
                    return;
                }
            }
            axios({
                method: 'post',
                url: this.$host + 'updateUser.php',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: Qs.stringify({
                    email: this.upemail,
                    password: this.uppassword
                })
            }).then(response => {
                if (response.data.code == 0) {
                    this.updateMsg = `更新成功，请重新登录`;
                    setTimeout(function() {
                        window.location.href = 'login.html';
                    }, 800);
                } else {
                    this.updateMsg = response.data.msg;
                }
            }).catch(err => {
                console.log(err);
            });
        }
    }
}